<template>
  <div>
    <!-- 1.定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>博客管理</el-breadcrumb-item>
      <el-breadcrumb-item>博客分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2.定义卡片视图 -->
    <el-card class="box-card">
      <!-- 3.定义栅格的一行 :gutter="20"定义行间距   :span="9" 占位符  -->
      <el-row :gutter="20">
        <el-col :span="9">
          <!-- 3.定义搜索框 -->
          <el-input
            placeholder="请输入分类名称"
            v-model="queryInfo.query"
            clearable
            @clear="getBlogSortList"
          >
            <el-button slot="append" icon="el-icon-search" @click="getBlogSortList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <!-- 定义添加按钮-->
          <el-button type="primary" @click="dialogVisible = true">添加分类</el-button>
        </el-col>
      </el-row>

      <!-- 用户数据表格展现  border 边框线属性  -->
      <el-table :data="blogSortList" border stripe>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="sortName" label="分类名称">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" >{{ scope.row.sortName }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="分类介绍"></el-table-column>
        <el-table-column prop="clickCount" label="点击数">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" type="success" >{{ scope.row.clickCount }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" type="warning">{{ scope.row.sort }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="updateBlogSortBtn(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="deleteBlogSort(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 定义分页组件 关于分页插件的属性说明
            1.@size-change 如果分页中每页实现的条数发生变化 则会触发这个该事件
            2.@current-change 当页数发生改变时,触发该函数
            3.current-page 当前选中的页
            4.page-sizes   页面数据展现的选项
            5.page-size    默认选中的页数
            6.layout    分页中展现的数据种类
            7.total     记录总数
      -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 编辑分类新增对话框 visible.sync 控制对话框的显示-->
    <el-dialog title="添加分类" :visible.sync="dialogVisible" width="50%" @close="closeDialog">
      <!-- 定义分类提交表单数据-->
      <el-form
        :model="addBlogSortModel"
        :rules="rules"
        ref="addBlogSortRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名" prop="sortName">
          <el-input v-model="addBlogSortModel.sortName"></el-input>
        </el-form-item>
        <el-form-item label="分类描述" prop="content">
          <el-input v-model="addBlogSortModel.content"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model.number="addBlogSortModel.sort"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBlogSortBtn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 定义修改页面 当对话框关闭时,将表格数据重置 @close="closeUpdateDialog"-->
    <el-dialog title="编辑分类" :visible.sync="updateDialogVisible" width="50%">
      <!-- 定义博客分类提交表单数据-->
      <el-form
        :model="updateBlogSortModel"
        :rules="rules"
        ref="updateBlogSortRef"
        label-width="100px"
      >
        <el-form-item label="分类名" prop="sortName">
          <el-input v-model="updateBlogSortModel.sortName"></el-input>
        </el-form-item>
        <el-form-item label="分类描述" prop="content">
          <el-input v-model="updateBlogSortModel.content"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model.number="updateBlogSortModel.sort"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateBlogSort">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    const checkSort = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('排序不能为空'));
      }
      if (!Number.isInteger(value)) {
        return callback(new Error('请输入数字值'));
      } else {
        if (value < 0) {
          return callback(new Error('必须大于0'));
        } else {
          return callback();
        }
      }

    }
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10
      },
      blogSortList: [],
      //记录总数是数值类型
      total: 0,
      dialogVisible: false,
      addBlogSortModel: {
        sortName: '',
        content: '',
        sort: ''
      },
      //数据校验规则
      rules: {
        sortName: [
          { required: true, message: '请输入分类名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' },
          { validator: checkSort, trigger: 'blur' }
        ]
      },
      updateDialogVisible: false,
      //定义修改用户数据封装
      updateBlogSortModel: {
      }
    }

  },
  methods: {
    async getBlogSortList() {
      const { data: result } = await this.$http.get('/blogsort/getList', {
        params: this.queryInfo
      })
      if (result.status !== 200) return this.$message.error("博客分类列表查询失败")
      this.blogSortList = result.data.rows
      this.total = result.data.total
      console.log("总记录数:" + this.total)
    },
    handleSizeChange(pageSize) {
      //console.log("每页展现的条数"+pageSize)
      this.queryInfo.pageSize = pageSize
      this.getBlogSortList()
    },
    handleCurrentChange(pageNum) {
      //console.log("页数:"+pageNum)
      this.queryInfo.pageNum = pageNum
      this.getBlogSortList()
    },
    closeDialog() {
      //重置表格数据
      this.$refs.addBlogSortRef.resetFields()
    },
    //校验用户数据
    addBlogSortBtn() {
      this.$refs.addBlogSortRef.validate(async valid => {
        //如果校验失败 则停止数据
        if (!valid) return
        //console.log(this.addBlogSortModel)
        const { data: result } = await this.$http.post('/blogsort/add', this.addBlogSortModel)
        if (result.status !== 200) return this.$message.error("博客分类新增失败")
        this.$message.success("博客分类新增成功")
        //关闭对话框
        this.dialogVisible = false
        //重新获取用户列表
        this.getBlogSortList()

      })
    },
    async updateBlogSortBtn(blogSort) {
      this.updateDialogVisible = true
      /* const { data: result } = await this.$http.get("/blogsort/" + blogSort.uid)
      if (result.status !== 200) return this.$message.error("博客分类查询失败") */
      this.updateBlogSortModel = blogSort
    },
    closeUpdateDialog() {
      //重置表格数据
      this.$refs.updateBlogSortRef.resetFields()
    },
    updateBlogSort() {
      //1.预校验数据
      this.$refs.updateBlogSortRef.validate(async valid => {
        if (!valid) return this.$message.error("表单验证没有通过")
        //根据接口文档要求封装数据
        let blogSort = {}
        blogSort.uid = this.updateBlogSortModel.uid
        blogSort.sortName = this.updateBlogSortModel.sortName
        blogSort.content = this.updateBlogSortModel.content
        blogSort.sort = this.updateBlogSortModel.sort
        const { data: result } = await this.$http.post(`/blogsort/edit`, blogSort)
        if (result.status !== 200) return this.$message.error("分类修改失败")
        this.$message.success("分类更新成功")
        this.updateDialogVisible = false
        this.getBlogSortList()
      })
    },
    async deleteBlogSort(blogSort) {
      //1.消息确认框
      const result = await this.$confirm('此操作将删除 ' + blogSort.sortName + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)

      //如果确认  confirm  如果取消 cancel
      if (result !== 'confirm') {
        return this.$message.info("删除取消")
      }
      const { data: result2 } = await this.$http.post(`/blogsort/delete`, blogSort)
      if (result2.status !== 200) return this.$message.error("删除失败")
      this.$message.success("删除成功")
      //重新加载 数据
      this.getBlogSortList()
    }
  },
  //利用钩子函数实现数据查询
  mounted() {
    this.getBlogSortList()
  }
}
</script>


<style lang="less" scoped>
</style>
